﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet"/>
    <link href="css/Viewers.css" rel="stylesheet"/>
    <link href="css/theme/theme-red.css" rel="stylesheet" id="themeCss"/>
    <script src="js/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="js/highcharts.js"></script>
    <script type="text/javascript" src="js/highcharts-3d.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <script src="js/ViewersCommon.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <link href="css/square/blue.css" rel="stylesheet"/>
    <script type="text/javascript" src="js/term-explain.js"></script>
    <!--[if lte IE 9]>
    <script src="/JS/bootstrap/respond.js"></script>
    <![endif]-->
    <title></title>
    <style type="text/css">
        #viewer_cont {
        background: #fff;
        }
    </style>

    <script type="text/javascript">

        function show(jsondata) {

            var jsonobj = jsondata;
   
            document.getElementById("content").innerHTML = jsonobj.content;
            
            highchartsReflow();
       }
      
      $(document).ready(function () {
            highchartsReflow();
			Android.pageFinished();
        });
      
      function productView(productID) {
            if ($("#HidTrackProposalId").val() == "") {
			    Android.isPreview(true);
                return;
            }
            window.open('http://p.yibaoyun.cn/ASP/PlanView.aspx?prpslid=' + $("#HidTrackProposalId").val() + '&prdctid=' + $(productID).attr("productID") + '&indx=' + $(productID).attr("productIndex"));
        }
        
        function autoPlay(c, name) {
            var series = c.series;
            var seriesLength = c.series.length;
            var index = 0;
            var nameHandel = setInterval(function () {
                if (index === seriesLength) index = 0;
                for (var i = 0; i < seriesLength; i++) {
                    var s = series[i];

                    if (i === index) s.show();
                    else s.hide();
                }
                index++;
            }, 2000);
            LengentHandelMap.put(name, nameHandel);
        }
        
        
        // 方案图表重绘
        function highchartsReflow() {
		
		     //添加区间事件
            $(".btnchart-lazyload").click(function () {
                var modelDataTarget = $(this).attr("data-target");
                $(modelDataTarget).on('shown.bs.modal', function (e) {

                    var highchartObj = $(modelDataTarget).find(".highchartsArea-lazyload");
                        var chartJs = highchartObj.attr('chartJs');
                        var chartData = highchartObj.attr('chartData');
                        if (chartJs != '') {
                            highchartObj.highcharts(JSON.parse(chartJs));
                        }
                });
            });
			
            $('.highchartsArea').each(function () {
                var chartJs = $(this).attr('chartJs');
                var chartData = $(this).attr('chartData');
               if (chartJs != '') {
                    $(this).highcharts(JSON.parse(chartJs));
                }
            });
           
			
			// 产品参数对比
            $(".table-btn-mark").click(function () {
                
                var insuredID = $(this).attr('insuredId');
                $('.btn-group-mark').each(function () {
                    $(this).css('display', 'none');
                })
                $('#btngroup' + insuredID).css('display', 'block');
                var modelDataTarget = $(this).attr("data-target");
                $(modelDataTarget).on('shown.bs.modal', function (e) {
                    $('#containerDiff').highcharts({
                        title: { text: "利益比较" },
                        xAxis: {
                            labels: {
                                format: '{value} 岁'
                            }
                        },
                        yAxis: {
                            floor: 0,
                            title: {
                                text: '保险金额（元）'
                            },
                            labels: {
                                format: '{value} 元'
                            }
                        },
                        tooltip: {
                            pointFormat: '{series.name} <b>{point.y:,.2f}元</b><br/>年龄 {point.x}周岁'
                        },
                        plotOptions: {
                            series: {
                                marker: {
                                    enabled: false
                                },
                            }
                        },
                        series: []
                    });
                    $('#btngroup' + insuredID + ' input:first').click();
                    $('#btngroup' + insuredID + ' input:first').focus();
                });
            });

            $(".model-btn-chart").click(function () {
                var data = JSON.parse($(this).attr('chartdata'));
                $('#containerDiff').highcharts({
                    xAxis: {
                        labels: {
                            format: '{value} 岁'
                        }
                    },
                    yAxis: {
                        floor: 0,
                        title: {
                            text: '保险金额（元）'
                        },
                        labels: {
                            format: '{value} 元'
                        }
                    },
                    tooltip: {
                        pointFormat: '{series.name} <b>{point.y:,.2f}元</b><br/>年龄 {point.x}周岁'
                    },
                    title: {
                        text: $(this).attr('value'),
                    },
                    plotOptions: {
                        series: {
                            marker: {
                                enabled: false
                            },
                        }
                    },
                    series: data
                });
            });
			
            
            // 滚动条------------------------------------------------------------------------------------------------------------------------------
            var BarB = $(".bar_bg"),
                BarC = $(".bar_click"),
                BarP = $(".bar_percent"),
                BarI = $(".bar_input"),
                BarBW,
                BarCMove = false,
                BarCX,
                BarMoveObject,
                BarPMoveObject,
                BarIMoveObject;
            BarC.mousedown(function (e) {
                BarCMove = true;
                var BarBX = parseInt($(this).css("left"));
                BarCX = e.pageX - BarBX;
                BarMoveObject = $(this);
                BarPMoveObject = $(this).next()
                BarBW = $(this).parent().width();
                BarIMoveObject = $(this).children();
            });
            $(document).mousemove(function (e) {
                if (BarCMove) {
                    var PageX = e.pageX;
                    var CX = PageX - BarCX;
                    if (CX <= 0) {
                        CX = 0
                    } else if (CX >= BarBW) {
                        CX = BarBW
                    } else {
                        CX = PageX - BarCX;
                    };
                    BarMoveObject.css({ "left": CX });
                    BarPMoveObject.css({ "width": parseInt(CX / BarBW * 100) + "%" });
					chart = BarPMoveObject.parent().parent().prevAll(".highchartsArea-lazyload").highcharts();
                    // 取得利益表行数
                    var maxAge = BarMoveObject.attr("maxAge");
                    var minAge = BarMoveObject.attr("minAge");
                    var rowCount = maxAge - minAge;

                    // 取得水平滚动比例
                    var horizontalRatio = BarBW / rowCount;
                    var age = (parseInt(minAge)) + (parseInt(CX / horizontalRatio) == 0 ? 0 : parseInt(CX / horizontalRatio));
                    if (age == minAge) {
                        BarIMoveObject.text("首年")
                    } else if (age == maxAge) {
                        BarIMoveObject.text("期满")
                    } else {
                        BarIMoveObject.text(age + "岁");
                    }
                    var chartData = BarMoveObject.parent().parent().attr('chartData');
                    var areaSourceData = JSON.parse(chartData);
                    var arrData = new Array();
                    var selYear = age;
                    for (var j = 0; j < areaSourceData.length; j++) {
                        var data = areaSourceData[j].data;
                        var name = areaSourceData[j].name;
                        for (var k = 0; k < data.length; k++) {
                            if (data[k][0] == selYear) {
                                arrData.push({ name: name, data: [parseFloat(data[k][1].toFixed(2))] });
                                break;
                            }
                        }
                    }
                    for (var j = 0; j < arrData.length; j++) {
                        for (var k = 0; k < areaSourceData.length; k++) {
                            if (areaSourceData[k].name == arrData[j].name) {
                                chart = BarMoveObject.parent().parent().prevAll(".highchartsArea-lazyload").highcharts();
                                chart.series[k].setData(arrData[j].data);
                                chart.xAxis[0].categories[0] = BarIMoveObject.text();
                                break;
                            }
                        }
                    }
                }
            }).mouseup(function () {
                BarCMove = false;
            });

            // Touch事件
            var BarBTouch = $(".bar_bg"),
		        BarCTouch = $(".bar_click"),
		        BarPTouch = $(".bar_percent"),
		        BarITouch = $(".bar_input"),
		        BarTouchBW,
		        BarCMoveTouch = false,
		        BarCXTouch,
                BarTouchMoveObject,
                BarPTouchMoveObject,
                BarITouchMoveObject;

            var x = document.getElementsByClassName('bar_click');
            var i;
            for (i = 0; i < x.length; i++) {
                x[i].addEventListener('touchstart', function (event) {
                    BarCMoveTouch = true;
                    var BarBX = parseInt($(this).css("left"));
                    BarCXTouch = event.touches[0].clientX - BarBX;
                    BarTouchMoveObject = $(this);
                    BarPTouchMoveObject = $(this).next();
                    BarTouchBW = $(this).parent().width();
                    BarITouchMoveObject = $(this).children();
                }, false);

                x[i].addEventListener('touchmove', function (event) {
				　　event.preventDefault();
                    event.stopImmediatePropagation();
                    if (BarCMoveTouch) {
                        var touch = event.targetTouches[0];
                        var PageX = touch.pageX;
                        var CX = PageX - BarCXTouch;
                        if (CX <= 0) {
                            CX = 0
                        } else if (CX >= BarTouchBW) {
                            CX = BarTouchBW
                        } else {
                            CX = PageX - BarCXTouch;
                        };
                        BarTouchMoveObject.css({ "left": CX });
                        BarPTouchMoveObject.css({ "width": parseInt(CX / BarTouchBW * 100) + "%" });

                        // 取得利益表行数
                        var maxAge = BarTouchMoveObject.attr("maxAge");
                        var minAge = BarTouchMoveObject.attr("minAge");
                        var rowCount = maxAge - minAge;

                        // 取得水平滚动比例
                        var horizontalRatio = BarTouchBW / rowCount;
                        var age = (parseInt(minAge)) + (parseInt(CX / horizontalRatio) == 0 ? 0 : parseInt(CX / horizontalRatio));
                        BarITouchMoveObject.attr("valueAge", age);
                        if (age == minAge) {
                            BarITouchMoveObject.text("首年")
                        } else if (age == maxAge) {
                            BarITouchMoveObject.text("期满")
                        } else {
                            BarITouchMoveObject.text(age + "岁");
                        }
                    }
                }, false);

                x[i].addEventListener('touchend', function (event) {
                    BarCMoveTouch = false;

                    chart = BarPTouchMoveObject.parent().parent().prevAll(".highchartsArea-lazyload").highcharts();
                    var chartData = BarTouchMoveObject.parent().parent().attr('chartData');
                    var areaSourceData = JSON.parse(chartData);
                    var arrData = new Array();
                    var selYear = $(this).children().attr("valueAge");
                    for (var j = 0; j < areaSourceData.length; j++) {
                        var data = areaSourceData[j].data;
                        var name = areaSourceData[j].name;
                        for (var k = 0; k < data.length; k++) {
                            if (data[k][0] == selYear) {
                                arrData.push({ name: name, data: [parseFloat(data[k][1].toFixed(2))] });
                                break;
                            }
                        }
                    }
                    for (var j = 0; j < arrData.length; j++) {
                        for (var k = 0; k < areaSourceData.length; k++) {
                            if (areaSourceData[k].name == arrData[j].name) {
                                chart.series[k].setData(arrData[j].data);
                                chart.xAxis[0].categories[0] = BarITouchMoveObject.text();
                                break;
                            }
                        }
                    }
                }, false);
            }

            //初始化
            touchMoveInitialize();
            // 滚动条------------------------------------------------------------------------------------------------------------------------------
            
        }


	     window.onresize = function () {
            //初始化
            touchMoveInitialize()
        }
		
		function touchMoveInitialize() {
            //初始化
            var BarBTouch = $(".bar_bg"),
		        BarCTouch = $(".bar_click"),
		        BarPTouch = $(".bar_percent"),
		        BarITouch = $(".bar_input"),
		        BarTouchBW,
		        BarCMoveTouch = false,
                BarTouchMoveObject,
                BarPTouchMoveObject,
                BarITouchMoveObject;

            var x = $('.bar_click');
            x.each(function () {

                BarCMoveTouch = true;
                var BarBX = parseInt(100);
                BarTouchMoveObject = $(this);
                BarPTouchMoveObject = $(this).next();
                BarTouchBW = $(this).parent().width();
                BarITouchMoveObject = $(this).children();

                var CX = 0;
                BarTouchMoveObject.css({ "left": CX });
                BarPTouchMoveObject.css({ "width": parseInt(CX / BarTouchBW * 100) + "%" });
				
                // 取得利益表行数
                var maxAge = BarTouchMoveObject.attr("maxAge");
                var minAge = BarTouchMoveObject.attr("minAge");
                var rowCount = maxAge - minAge;
                // 取得水平滚动比例
                var horizontalRatio = BarTouchBW / rowCount;
                 var age = minAge;
                BarITouchMoveObject.attr("valueAge", age);
                if (age == minAge) {
                    BarITouchMoveObject.text("首年")
                } else if (age == maxAge) {
                    BarITouchMoveObject.text("期满")
                } else {
                    BarITouchMoveObject.text(age + "岁");
                }

            });
        }
    </script>
</head>
<body style="background-color:#d4d4d4">
<div id="content">

</div>
</body>
</html>
